<template>
  <AppPage>
    <div class="min-w-1000">
      <n-grid :cols="cols">
        <n-gi></n-gi>
        <n-gi :span="span">
          <n-card class="mt-12">
            <n-h1 prefix="bar" type="primary" class="mb-0">
              <n-text>
                {{ title }}
              </n-text>
            </n-h1>
          </n-card>
          <slot></slot>
        </n-gi>
        <n-gi></n-gi>
      </n-grid>
    </div>
  </AppPage>
</template>

<script setup>
import AppPage from './AppPage.vue'

const props = defineProps({
  title: {
    type: String,
    default: '标题',
  },
  size: {
    type: String,
    default: 'default',
  },
})

let cols = computed(() => {
  const size = props.size
  if (size === 'default') return 6
  else if (size === 'large') return 8
  else if (size === 'full') return 12
})

let span = computed(() => {
  const size = props.size
  if (size === 'default') return 4
  else if (size === 'large') return 6
  else if (size === 'full') return 10
})
</script>
